<template>
    <div class="common-layout h-full" >
        <el-container class="h-full">
            <el-header class="p-0 h-[80px]">
                <!-- 主页--头部区域 -->
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 主页--左侧菜单 -->
                    <Aside></Aside>
                </el-aside>
                <el-main class="p-0">
                    <!-- 主页--主体区域 -->
                    <Main></Main>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import Header from '@/components/home/Header.vue'
import Aside from '@/components/home/Aside.vue'
import Main from '@/components/home/Main.vue'
import { onMounted, onUpdated } from 'vue'
import { usePermissionStore } from '@/stores/permission'

// 获取全局状态中的permission
const permissionStore = usePermissionStore()

// 挂载完成后，首次进入home页面或刷新后触发
onMounted(() => {
    permissionStore.getLoginUser()
})

// 更新结束后，点击菜单进行路由跳转完成后触发
onUpdated(() => {
    permissionStore.getLoginUser()
})
</script>

<style scoped>

</style>